<template>
	<view id="modifyInformation">
		<view class="my">
			<view class="left">
				<!-- <view class="return" @tap="mine()">
					<text class="cuIcon-back"></text>
				</view> -->
			</view>
			<view class="middle" >
				编辑资料
			</view>
			<view class="right">
				
			</view>
		</view>
		<view class="information">
			<view class="head">
				<view class="left1">
					头像
				</view>
				<view class="right1">
					<view class="photo">
						<img style="wibackground-size: contain; border-radius: 50%; width: 90rpx; height: 90rpx;" :src="img">
					</view>
				</view>
			</view>
			<view class="two">
				<view class="name">
					用户名
				</view>
				<view class="nameInformation">
					{{name}}
				</view>
			</view>
			<view class="three">
				<view class="sex">
					性别
				</view>
				<view class="sexInformation">
					{{gender}}
				</view>
			</view>
			<view class="four">
				<view class="birthday">
					生日
				</view>
				<view class="birthdayInformation">
					{{birthday}}
				</view>
			</view>
			<view class="five">
				<view class="city">
					城市
				</view>
				<view class="cityInformation">
					{{city == '' || province == '' ? '未设置' : city+','+province}}
				</view>
			</view>
			<view class="six">
				<view class="signer">
					个人签名
				</view>
				<view class="signerInformation">
					{{signer}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ModifyInformation',
		components: {},
		data() {
			return {
					img:'https://img2.baidu.com/it/u=3914678122,2806256280&fm=26&fmt=auto',
					name:'',
					sex:0,
					birthday:'未设置',
					city:'',
					signer:'我很强我知道!',
					province: ''
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'login',
				success:(e) => {
					this.name = e.data.username
					this.img = e.data.imgSrc
					this.sex = e.data.gender
					this.city = e.data.city
					this.province = e.data.province
					console.log(this.sex,this.city,this.province)
				}
			})
		},
		computed:{
			gender() {
				if(this.sex==1) {
					return '男'
				} else if(this.sex==2) {
					return '女'
				} else {
					return '未知'
				}
			}
		},
		methods: {
			mine() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.my{
		height: 181.81rpx;
		margin: 10.9rpx 18.18rpx;
		border-radius: 27.27rpx;
		background-color: #CFE4FF;
		display: flex;
		text-align: center;
		.left{
			flex: 1;
		}
		.middle{
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 43.63rpx;
			background-color: #fff;
			flex: 2;
			margin: auto 0;
			border-radius: 27.27rpx;
		}
		.right{
			flex: 1;
		}
	}
	.information{
		height: 940rpx;
		position: relative;
		margin: 10.9rpx 18.18rpx;
		border-radius: 27.27rpx;
		background-color: #CFE4FF;
		.head{
			display: flex;
			height: 109.09rpx;
			.left1{
				flex: 1;
				padding-left: 50.9rpx;
				padding-top: 15rpx;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32.72rpx;
			}
			.right1{
				flex: 1;
				.photo{
					 overflow: hidden;
					display: block;
					width: 90rpx;
					height: 90rpx;
					height: 90rpx;
					width: 90rpx;
					 border-radius: 50%;
					 text-align: center;
					 line-height: 90rpx;
					 background-color: #fff;
					 margin: 18rpx 0 0 200rpx;
				}
			}
		}
		.two{
			display: flex;
			height: 95rpx;
			font-size: 32.72rpx;
			.name{
				flex: 1;
				padding-left: 50.9rpx;
				line-height: 95rpx;
			}
			.nameInformation{
				position: absolute;
				right: 50.9rpx;
				flex: 1;
				text-align: center;
				line-height: 95rpx;
			}
		}
		.three{
			display: flex;
			height: 95rpx;
			font-size: 32.72rpx;
			.sex{
				flex: 1;
				padding-left: 50.9rpx;
				line-height: 95rpx;
			}
			.sexInformation{
				position: absolute;
				right: 50.9rpx;
				flex: 1;
				text-align: center;
				line-height: 95rpx;
			}
		}
		.four{
			display: flex;
			height: 95rpx;
			font-size: 32.72rpx;
			.birthday{
				flex: 1;
				padding-left: 50.9rpx;
				line-height: 95rpx;
			}
			.birthdayInformation{
				position: absolute;
				right: 50.9rpx;
				flex: 1;
				text-align: center;
				line-height: 95rpx;
			}
		}
		.five{
			display: flex;
			height: 95rpx;
			font-size: 32.72rpx;
			.city{
				flex: 1;
				padding-left: 50.9rpx;
				line-height: 95rpx;
			}
			.cityInformation{
				position: absolute;
				right: 50.9rpx;
				flex: 1;
				text-align: center;
				line-height: 95rpx;
			}
		}
		.six{
			display: flex;
			height: 95rpx;
			font-size: 32.72rpx;
			.signer{
				flex: 1;
				padding-left: 50.9rpx;
				line-height: 95rpx;
			}
			.signerInformation{
				position: absolute;
				right: 50.9rpx;
				flex: 1;
				text-align: center;
				line-height: 95rpx;
			}
		}
	}
</style>
